<template>
    <div class="recommendLIstDetail">
        <div class="sonListDetailPic-text">
            <div class="pic">
                <img class="auto-img" :src="url" alt="">
            </div>
            <div class="back">
                <navBack :left-arrow="true"></navBack>
            </div>
            <div class="songlist-play">
                <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                    <div class="bg">
                        <div class="songList">
                            <div class="listTitle" v-if="recommendDynamic">
                                <div class="title">
                                    <div class="img">
                                        <img class="auto-img" src="../../public/images/songList/监听-fill.png" alt="">
                                    </div>
                                    <div class="text" v-if='recommendDynamic.playCount>=1000'>{{ (recommendDynamic.playCount / 1000).toFixed(1) }}万</div>
                                    <div class="text" v-if='recommendDynamic.playCount<=1000'>{{recommendDynamic.playCount}}</div>
                                </div>
                                <div class="title">
                                    <div class="img" @click="getLike">
                                        <van-icon name="like" :color="isLike ? '#e4393c' : '#fff'" size="23" />

                                    </div>
                                    <div class="text" v-if='recommendDynamic.bookedCount>=1000'>{{ (recommendDynamic.bookedCount / 1000).toFixed(1) }}万</div>
                                    <div class="text" v-if='recommendDynamic.bookedCount<=1000'>{{recommendDynamic.bookedCount}}</div>
                                </div>
                                <div class="title">
                                    <div class="img">
                                        <img class="auto-img" src="../../public/images/songList/评论.png" alt="">
                                    </div>
                                    <div class="text" v-if='recommendDynamic.commentCount>=1000'>{{ (recommendDynamic.commentCount).toFixed(1) }}万</div>
                                    <div class="text" v-if='recommendDynamic.commentCount<=1000'>{{ (recommendDynamic.commentCount).toFixed(1) }}万</div>
                                </div>

                                <div class="title">
                                    <div class="img">
                                        <img class="auto-img" src="../../public/images/songList/分享.png" alt="">
                                    </div>
                                    <div class="text">分享</div>
                                </div>
                            </div>
                            <div class="advertisement" v-if="recommendDynamic">
                                <div class="advertisementTwo">
                                    <div class="img">
                                        <img class="auto-img" src="../../public/images/songList/会员.png" alt="">
                                    </div>
                                    <div class="advertiseText">超级会员臻品音质2.0重磅来袭</div>
                                </div>
                                <div class="advertisementTwo">
                                    <div class="advertiseText">去体验</div>
                                    <div class="img">
                                        <img class="auto-img" src="../../public/images/songList/ic_chevron_right.png"
                                            alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="allplay">
                                <div class="allplayTwo">
                                    <div class="img">
                                        <img class="auto-img" src="../../public/images/songList/播放.png" alt="">
                                    </div>
                                    <div class="allplayText">全部播放({{ allSongNum }})</div>
                                </div>
                                <div class="allplayTwo">
                                    <div class="img2">
                                        <img class="auto-img" src="../../public/images/songList/排序.png" alt="">
                                    </div>
                                    <div class="img2 img3">
                                        <img class="auto-img" src="../../public/images/songList/列表.png" alt="">
                                    </div>
                                </div>
                            </div>

                            <div class="songListAll">
                                <div class="songListItem" v-for="(item, index) in recommendListDetail" :key="index">

                                    <listItem :song-data="item" :index="index" :is-play-icon="true"></listItem>
                                </div>


                            </div>
                        </div>
                    </div>
                </van-pull-refresh>

            </div>

        </div>

    </div>
</template>

<script>
import { Toast } from 'vant';
import navBack from '../components/ReturnBack.vue'
import listItem from "../components/songListItem.vue"
export default {
    name: "RecommendLIstDetail",
    components: {
        navBack,
        listItem
    },
    data() {
        return {
            recommendListDetail: "",
            recommendDynamic: "",
            recommendPalyNum: "",
            allSongNum: 0,
            isLoading: false,
            isLike: false,
            recommendListType: "",
            recommendListId: "",
            url: "",
            likeSongList: "",
            likeId: ""
        }
    },
    created() {
        // 获取当前点击的推荐歌单的id
          
        let recommendId = this.$route.params.id
        this.url = this.$route.params.url
          

        this.recommendListId = recommendId
          
        this.getRecommendList(recommendId)
        this.getRecommendDynamic(recommendId)

        // 查看用户是否收藏歌单
        this.findLikeSongList()

    },
    methods: {
        onRefresh() {
            setTimeout(() => {
                Toast('刷新成功');
                this.isLoading = false;
            }, 1000);
        },
        // 歌单所有歌曲
        getRecommendList(recommendId) {
            this.axios({
                method: "get",
                url: "/playlist/track/all",
                params: {
                    id: recommendId,
                    limit: 30,
                    offset: 1
                }
            }).then(res => {
                   
                this.recommendListDetail = res.data.songs
                this.recommendListDetail.forEach((element, index) => {
                    this.allSongNum = index + 1
                });
                  
            }).catch(err => {
                  
            })
        },
        // 获取歌单详情动态（评价数量，播放数量，分享数量，跟着，已收藏subscribed）
        getRecommendDynamic(recommendId) {
            this.axios({
                method: "get",
                url: "/playlist/detail/dynamic",
                params: {
                    id: recommendId,
                }
            }).then(res => {
                 
                this.recommendDynamic = res.data
                  
            }).catch(err => {
                  
            })
        },
        // 收藏和取消收藏歌单
        getLike() {


            let loginInfo = window.localStorage.getItem('loginInfo')
            if (loginInfo) {
                let loginInfo2 = JSON.parse(loginInfo)
                if (loginInfo2.length !== 0) {
                      
                    this.isLike = !this.isLike
                    if (this.isLike) {
                        this.axios({
                            method: "get",
                            url: "/playlist/detail",
                            params: {
                                id: this.recommendListId,
                            }
                        }).then(res => {
                              
                            // 设置本地存储
                            let likeSongList = localStorage.getItem("likeSongList")
                            // 如果本地存储不存在,则空
                            if (!likeSongList) {
                                likeSongList = []
                            }
                            // 如果本地存储存在,则存数据到本地存储中
                            else {
                                likeSongList = JSON.parse(likeSongList)
                            }
                            // 将需要存储的数据存到本地存储中
                            likeSongList.push(res.data.playlist)

                            // 把重复的数据去掉
                            likeSongList = [...new Map(likeSongList.map(x => [x.id, x])).values()]
                            window.localStorage.setItem("likeSongList", JSON.stringify(likeSongList))

                        }).catch(err => {
                              
                        })
                    } else {
                        this.axios({
                            method: "get",
                            url: "/playlist/detail",
                            params: {
                                id: this.recommendListId,
                            }
                        }).then(res => {
                            let likeSongList2 = JSON.parse(likeSongList)
                            let index = likeSongList2.findIndex(i => {
                                return i.id === this.recommendListId
                            })
                            likeSongList2.splice(index, 1)
                            localStorage.setItem("likeSongList", JSON.stringify(likeSongList2))
                        }).catch(err => {
                              
                        })

                    }


                } else {
                      
                    Toast('登录后收藏')
                    this.$router.push({ name: "GoLogin" })
                }


            } else {
                Toast('登录后收藏')
                this.$router.push({ name: "GoLogin" })
            }

        },
        // 查看是否收藏歌单
        findLikeSongList() {
            let loginInfo = window.localStorage.getItem('loginInfo')
            let likeSongList = window.localStorage.getItem('likeSongList')
            if (loginInfo) {
                let loginInfo2 = JSON.parse(loginInfo)
                  
                if (loginInfo2.length !== 0) {
                    if (likeSongList) {
                        let likeSongList2 = JSON.parse(likeSongList)
                        for (let i = 0; i < likeSongList2.length; i++) {
                            if (likeSongList2[i].id === this.recommendListId) {
                                this.isLike = true
                            }

                        }
                    }
                }
            }
        }
    }
}

</script>

<style lang="less" scoped>
.recommendLIstDetail {
    color: #fff;

    // background: linear-gradient(to bottom, transparent, #4E3F63, #271E55, #1C0438);

    // background: linear-gradient(to bottom,  transparent 50%, #4E3F63 70%, #271E55 90%, #1C0438 100%);

    .sonListDetailPic-text {
        position: relative;

        .back {
            position: absolute;
            top: 0px;
            right: 0px;
            left: 0px;
        }


    }

    .songlist-play {
        width: 100%;
        position: absolute;
        top: 200px;

        .bg {
            background-color: #160742;
        }

        .songList {

            width: 92%;
            margin: 0px 4%;


            .listTitle {
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .title {
                    display: flex;
                    text-align: center;
                    align-items: center;

                    .text {
                        margin-left: 5px;
                    }
                }

                .img {
                    width: 25px;
                }
            }

            .advertisement,
            .allplay {
                display: flex;
                height: 50px;
                align-items: center;
                justify-content: space-between;

                .advertisementTwo {
                    display: flex;

                    .advertiseText {
                        margin-left: 8px;
                    }
                }

                .img {
                    width: 20px;
                }
            }

            .allplay {
                .allplayTwo {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .allplayText {
                        margin-left: 8px;
                    }

                    .img {
                        width: 30px;
                    }

                    .img2 {
                        margin-right: 7px;
                        width: 18px;
                    }

                    .img3 {
                        margin-left: 10px;
                    }
                }
            }


        }
    }

}
</style>